<template>
  <div class="floor">
    <UserAvater :userInfo="floor.userInfo" class="floor-user-info" />
    <div class="floor-movement">
      <div class="floor-movement__text">
        <span
          class="text-icon-selected"
          v-if="floor.comment.type.indexOf('1') >= 0"
        >
          精
        </span>
        <span class="text-icon-top" v-if="floor.comment.type.indexOf('2') >= 0"
          >顶置
        </span>
        {{ floor.comment.text }}
      </div>
      <div class="floor-imgs" v-if="floor.type == 1">
        <img
          :src="pic.src"
          alt="pic"
          class="floor-imgs__node"
          v-for="(pic, index) in floor.picList"
          v-if="index < 3"
          :key="index"
        />
      </div>

      <video
        class="floor-video"
        :src="floor.video"
        ref="floorVideo"
        v-if="floor.type == 2"
        controls
      />
    </div>
    <RoyoleTag :info="floor.tagInfo" class="royole-tag"> </RoyoleTag>
    <slot name="gap"></slot>
  </div>
</template>

<script>
import RoyoleTag from '../../components/RoyoleTag'
import UserAvater from './UserAvater'
export default {
  components: { UserAvater, RoyoleTag },
  name: 'Floor',
  props: {
    floor: {
      type: Object,
      default: () => {
        // 楼层
        return {
          type: 1,
          userInfo: {
            name: '张三三',
            //评论人头像
            avatar:
              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202006%2F13%2F20200613095119_riyfl.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1618894839&t=fd3b79de21800b11b08d617bcf3bd409',
            //多久前评论
            time: '3小时',
            // 评论设备
            device: 'Flexpai2',
            // 评论内容
          },
          comment: {
            // 评论内容
            text: '全新的用户体验',
            // 评论类型 精品 1  顶置
            type: ['1', '2'],
          },
          tagInfo: {
            views: 115,
            comments: 1078,
            thumbs: 2089,
          },
          picList: [
            {
              src:
                'http://s1.royole.com/ufs/templates/royole/assets/images/home/swiper/3.jpg',
            },
          ],
        }
      },
    },
  },
  data() {
    return {}
  },
  watch: {},
  computed: {},
  methods: {},
  created() {
    console.log(this.$refs.floorVideo)
  },
  mounted() {},
}
</script>
<style lang="scss" scoped>
.floor-user-info {
  padding-bottom: 16px;
}
.floor-imgs .floor-imgs__node:nth-child(3) {
  margin-right: 0px;
}
.floor {
  background: $color-background;
}
.floor-video {
  width: 200px;
  border-radius: 8px;
}
.floor-movement__text {
  padding-bottom: 16px;
}
.floor-imgs {
  display: flex;
  justify-content: center;
  width: 100%;
}
.floor-imgs__node {
  margin-right: 12px;
  height: 135px;
  width: 237px;
  border-radius: 8px;
}
.text-icon-selected {
  display: inline-block;
  width: 20px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  background: #eb2d4b;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}
.text-icon-top {
  display: inline-block;
  padding: 0 4px;
  height: 16px;
  line-height: 16px;
  background: $color-royole;
  border-radius: 3px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 500;
}
.royole-tag {
  margin: 24px 0;
}
</style>
